<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 引入 Bootstrap v3 的 CSS 文件 -->
		<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.css">
		<!-- 引入 jQuery（Bootstrap v3 依赖） -->
		<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
		<!-- 引入 Bootstrap v3 的 JS 文件 -->
		<script src="bootstrap-3.4.1/js/bootstrap.js"></script>
		<title>字典管理界面</title>
		<style>

		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">字典管理</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="字典类型">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="字典名称">
						</div>
						<div class="form-group">
							<select class="form-control">
								<option value="-1">所有</option>
								<option value="0">启用</option>
								<option value="1">禁用</option>
							</select>
						</div>
						<button class="btn btn-default">查询</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-toggle="modal" data-target="#addDictModal">添加字典</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>

		<script>
			// 当前浏览器加载DOM后，自动执行获取后端分页数据
			window.onload = function () {
				// 初始化数据
				initData(1,10);
			}
			function initData(pn,size) {
				// 后端请求地址
				url = "http://localhost:8080/dict/dicts/"+pn+"/"+size;

				// 使用jQuery的ajax方法获取数据
				$.ajax({
					url: url,
					type: 'get',
					dataType: 'json',
					success: function (res) {
						if(res.code==200){

							// 清空表格
							$("#tb").empty();
							// 清空分页条
							$("#pageBar").empty();

							// 拿到所有数据集合
							let dicts_temp = res.data.list
							// 遍历字典集合
							for (let i = 0; i < dicts_temp.length; i++) {
								let dict = dicts_temp[i]
								$("<tr><td>"+dict.id+"</td><td>"+dict.dname+"</td><td>"+dict.dtype+"</td><td>"+(dict.dstate==0?"启用":"禁用")+"</td><td>"+dict.mark+"</td><td>"+dict.create_time+"</td><td><button class='btn btn-xs btn-primary' onclick='updateDict("+dict.id+","+pn+")'>编辑</button><button class='btn btn-xs btn-info'>列表</button><button class='btn btn-xs btn-danger' onclick='deleteDict("+dict.id+","+pn+")' >删除</button></td></tr>").appendTo($("#tb"))
							}

							$("<li><a href='#' onclick='initData("+(res.data.pageNum-1)+","+10+")' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>").appendTo($("#pageBar"));

							let current_pages=res.data.navigatepageNums
							for (let i = 0; i < current_pages.length; i++) {
								let page = current_pages[i];
								if(page==pn){
									$("<li class='active'><a href='#' onclick='initData("+page+","+10+")'>"+page+"</a></li>").appendTo($("#pageBar"))
								}else{
									$("<li><a href='#' onclick='initData("+page+","+10+")'>"+page+"</a></li>").appendTo($("#pageBar"))
								}
							}

							$("<li><a href='#' onclick='initData("+(res.data.pageNum+1)+","+10+")' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>").appendTo($("#pageBar"));
						}
					},
					complete: function (err) {
						console.log("响应失败",err)
					}
				});

			}

			// 更新字典
			function updateDict(id,pageNum) {
				// 修改前获取最新数据
				$.ajax({
					url: "http://localhost:8080/dict/"+id,
					type: 'get',
					dataType: 'json',
					success: function (res) {
						if(res.code==200){
							let dict = res.data;
							$("#updateDictId").val(dict.id);
							$("#updateDname").val(dict.dname);
							$("#updateDtype").val(dict.dtype);
							document.getElementsByName("dstate_update").forEach(function (item) {
								if(item.value==dict.dstate){
									item.checked=true;
								}
							});
							$("#version").val(dict.version);
							$("#updateMark").val(dict.mark);
							$("#updatePageNum").val(pageNum);
							// 显示模态框
							$("#updateDictModal").modal('show');
						}
					},
					complete: function (err) {
						console.log("获取字典数据失败",err)
					}
				})

				
			}

			// 获取用户更改后的数据
			function updateDictDo() {
				let pageNum = document.getElementById("updatePageNum").value; 
				let id = document.getElementById("updateDictId").value;
				let dname = document.getElementById("updateDname").value;
				let dtype = document.getElementById("updateDtype").value;
				let dstate = document.querySelector("input[name='dstate_update']:checked").value
				let version = document.getElementById("version").value;
				let mark = document.getElementById("updateMark").value;
				console.log("更新字典",dname,dtype,dstate);

				let dict_obj = {"id":id,"dname": dname, "dtype": dtype, "dstate": dstate, "version": version, "mark": mark};

				// 发送更新请求
				$.ajax({
					url: "http://localhost:8080/dict/update",
					type: 'put',
					dataType: 'json',
					contentType: 'application/json',
					data: JSON.stringify(dict_obj),
					success: function (res) {
						if(res.code==200){
							// 关闭模态框
							$("#updateDictModal").modal('hide');
							// 刷新数据
							initData(pageNum,10);
						}
					},
					complete: function (err) {
						console.log("更新字典失败",err);
					}
				});
			}

			// 删除字典
			function deleteDict(id,pageNum) {
				if(confirm("确定要删除该字典吗？")){
					// 发送删除请求
					$.ajax({
						url: "http://localhost:8080/dict/delete"+"?id="+id,
						type: 'delete',
						dataType: 'json',
						success: function (res) {
							if(res.code==200){
								// 刷新数据
								initData(pageNum,10);
							}
						},
						complete: function (err) {
							console.log("删除字典失败",err);
						}
					});
				}
			}


		</script>
		
		
		<!-- 数据字典的表格 -->
		<table class="table table-bordered table-striped table-condensed">
			<thead>
				<th>#</th>
				<th>字典名称</th>
				<th>字典类型</th>
				<th>状态</th>
				<th>备注</th>
				<th>创建时间</th>
				<th>操作</th>
			</thead>
			<tbody id="tb" >
				
			</tbody>
			
			<tfoot>
				<tr>
					<td colspan="7" style="text-align: center;">
						<nav aria-label="Page navigation">
						  <ul class="pagination" id ="pageBar">	
						    
						  </ul>
						</nav>
					</td>
				</tr>
			</tfoot>
		</table>

		<!-- 修改字典模态框 -->
		<div class="modal fade" id="updateDictModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">编辑字典</h4>
					</div>
					<input type="hidden" id="updateDictId" value="">
					<input type="hidden" id="updatePageNum" value="">
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="inputDname" class="col-sm-2 control-label">字典名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="updateDname" placeholder="请输入字典名称">
								</div>
							</div>
							<div class="form-group">
								<label for="inputDtype" class="col-sm-2 control-label">字典类型</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="updateDtype" placeholder="请输入字典类型">
								</div>
							</div>
							<div class="form-group">
								<label for="inputMark" class="col-sm-2 control-label">备注</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="updateMark" placeholder="请输入备注信息">
								</div>
							</div>
							<div class="form-group">
								<label for="updateDstate" class="col-sm-2 control-label">字典状态</label>
								<div class="col-sm-10">
									<div class="checkbox">
										<label>
											<input type="radio" value="0" name="dstate_update"> 启用
										</label>
										<label>
											<input type="radio" value="1" name="dstate_update"> 禁用
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-1 col-sm-10">
									<div class="checkbox">
										<label>
											<span style="color: red;"></span>
										</label>
										
									</div>
								</div>
							</div>
						</form>
					</div>
					<input type="hidden" id="version" value="">
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="updateDictDo()">保存</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 添加字典模态框 -->
		<div class="modal fade" id="addDictModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">添加字典</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="inputDname" class="col-sm-2 control-label">字典名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputDname" placeholder="请输入字典名称">
								</div>
							</div>
							<div class="form-group">
								<label for="inputDtype" class="col-sm-2 control-label">字典类型</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputDtype" placeholder="请输入字典类型">
								</div>
							</div>
							<div class="form-group">
								<label for="inputMark" class="col-sm-2 control-label">备注</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputMark" placeholder="请输入备注信息">
								</div>
							</div>
							<div class="form-group">
								<label for="inputDstate" class="col-sm-2 control-label">字典状态</label>
								<div class="col-sm-10">
									<div class="checkbox">
										<label>
											<input type="radio" value="0" name="dstate"> 启用
										</label>
										<label>
											<input type="radio" value="1" name="dstate"> 禁用
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-1 col-sm-10">
									<div class="checkbox">
										<label>
											<span style="color: red;"></span>
										</label>
										
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>



	</body>
</html